<!--
 * @Description: text
 * @LastEditors: 蔡霸霸
 * @LastEditTime: 2021-02-28 13:09:03
-->
<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户ID" width="95" prop="id">
      </el-table-column>
      <el-table-column label="用户IP" prop="ip" align="center">
      </el-table-column>
      <el-table-column label="用户页面浏览数量" align="center">
        <template slot-scope="scope">
          {{ scope.row.browseNum }}
        </template>
      </el-table-column>
      <el-table-column label="用户页面浏览总时长" align="center">
        <template slot-scope="scope"> {{ scope.row.totalTime }}分钟 </template>
      </el-table-column>
      <el-table-column align="center" prop="createDate" label="首次登录时间">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createDate | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updateDate" label="最后登录时间">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.updateDate | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="用户浏览视频详情"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag @click.native="watchVideoList(scope.row)" class="elTag"
            >点击查看</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paging.pageNo"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="paging.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paging.total"
    >
    </el-pagination>

    <el-dialog title="视频列表" :visible.sync="dialogTableVisible" top="8vh">
      <el-table :data="gridData">
        <el-table-column
          property="id"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          property="videoId"
          label="视频ID"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          property="videoName"
          label="视频名称"
          width="300"
        ></el-table-column>
        <el-table-column
          property="totalTime"
          label="观看时长"
          show-overflow-tooltip
          width="120"
        >
          <template scope="{row}">
            {{ Number(row.totalTime).toFixed(2) }}分钟
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateDate"
          label="最后更新时间"
          width="200"
        >
          <template scope="{row}">
            <i class="el-icon-time" />
            <span>{{ row.updateDate | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="操作"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag @click.native="watchVideo(scope.row)" class="elTag"
              >跳转视频</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange2"
        :current-page="paging2.pageNo"
        :page-size="paging2.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="paging2.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData, getVideoList } from "@/api";

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      paging: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      paging2: {
        pageSize: 10,
        pageNo: 1,
        total: 0,
        ip: ""
      },
      dialogTableVisible: false,
      gridData: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await getTableData(this.paging).finally(e => {
        this.listLoading = false;
      });
      this.paging.total = count;
      console.log(data.list);
      this.list = data.list;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.paging.pageSize = val;
      console.log(this.dataType);
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.paging.pageNo = val;
      this.fetchData();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.paging2.pageNo = val;
      this.watchVideoList();
    },
    async watchVideoList(row) {
      console.log(row.ip);
      this.paging2.ip = row.ip;
      const { data, count } = await getVideoList(this.paging2);
      this.paging2.total = count;
      this.gridData = data.list;
      console.log(this.gridData);
      this.dialogTableVisible = true;
    },
    watchVideo({ videoId }) {
      console.log(videoId);
      if (videoId) {
        const url = `https://www.bilibili.com/video/${videoId}`;
        window.open(url);
      }
    }
  }
};
</script>

<style lang="scss">
.el-pagination {
  text-align: right;
  margin: 10px;
}
.elTag {
  cursor: pointer;
}
</style>
